<template>
	<view class="" style="height:100%;">
		<u-back-top :scroll-top="scrollTop"></u-back-top>
		<view class="content plr">
			<!-- 首页轮播 -->
			<bs-swiper @handSwIndex='handSwIndex' :list='swList'></bs-swiper>
			<!-- 首页菜单 -->
			<view class="mb-60">
				<bsMenu></bsMenu>
			</view>
			<!-- 热门推荐 -->
			<view class="mb-60">
				<hotRec :list='hotLists'></hotRec>
			</view>
		</view>
		<!-- 热门活动 -->
		<HotActivity :list='HotActivity' ref='HotActivity'></HotActivity>
	</view>

</template>

<script>
	import bsSwiper from '@/components/bs-swiper/bs-swiper.vue'
	import bsMenu from '@/components/bs-menu/bs-menu.vue'
	import hotRec from './components/HotRecommend/index.vue'
	import HotActivity from './components/HotActivity/index.vue'
	export default {
		components: {
			bsSwiper,
			bsMenu,
			hotRec,
			HotActivity
		},
		data() {
			return {
				scrollTop: 0,
				swList: [],
				hotLists: [],
				HotActivity: []
			}
		},
		onReachBottom() {},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		async onPullDownRefresh() {
			await this.init()
			uni.stopPullDownRefresh();
		},
		async onLoad() {

			await this.init()
		},
		methods: {
			async init() {
				let res = await this.$u.api.getBanner({
					category: 10
				})
				if (res.length != 0) {
					this.swList = res[0].imgUrlList
				}
				let hotLists = await this.$u.api.hotLists()
				this.hotLists = hotLists.slice(0, 2)
				this.HotActivity = hotLists
				console.log(hotLists, '获取首页');
			},
			//首页轮播点击事件
			handSwIndex(index) {
				if (this.swList[index].phoneImgSrc) {
					uni.navigateTo({
						url: '/pages/webView/webView?webSrc=' + this.swList[index].phoneImgSrc
					})
				}
			},
			handGetUserInfo() {},
			async handNav() {
				// uni.setStorageSync('show',true)
				// console.log(uni.getStorageSync("show"))
				this.$u.api.getSearch().then(res => {
					console.log(res);
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.ceshi1 {
		width: 100%;
		@include my-flex($fd: row, $ai:center, $jc:$bs-sb);
	}

	.content {
		width: 100%;
		padding-top: 30rpx;
	}
</style>
